<template>
    <view>
        <wxTopStatus backgroundColor="#fff">
            <template #icon>
                <image
                    class="back"
                    style="width: 20rpx"
                    :src="$getImg('/img/common/toLeft.png')"
                    mode="widthFix"
                ></image>
            </template>
            <!-- 有话题不显示显示 -->
            <view style="width: 100%">
                <selectNav
                    v-model="page.params.bizTarget"
                    @change="getList"
                    :list="navList"
                    v-if="!page.params.topicId"
                ></selectNav>
            </view>
        </wxTopStatus>
        <!-- 有话题显示 -->
        <view class="topic-header flex-between" v-if="page.params.topicId">
            <view class="topic-left flex-column gap-[20rpx]">
                <view class="title"> # {{ topicInfo.name }}</view>
                <view class="subtitle"> {{ topicInfo.views }}浏览</view>
            </view>
            <view class="topic-right flex-row">
                <view
                    class="topic-type"
                    :class="{
                        active: page.params.type === '1'
                    }"
                    @click="bizTypeSwitch(1)"
                >
                    帖子</view
                >
                <view
                    class="topic-type"
                    :class="{
                        active: page.params.type === '2'
                    }"
                    @click="bizTypeSwitch(2)"
                >
                    视频</view
                >
            </view>
        </view>

        <view class="content">
            <sleectTags
                v-model="page.params.bizTab"
                @change="getList"
                :list="tagsList"
            ></sleectTags>
            <!-- <view class="tag flex-row gap-[40rpx]">
        <view
          class="tag-item"
          :class="{
            active: page.params.bizTab === '1',
          }"
          @click="bizTabSwitch(1)"
        >
          热门</view
        >
        <view
          class="tag-item"
          :class="{
            active: page.params.bizTab === '2',
          }"
          @click="bizTabSwitch(2)"
        >
          新发</view
        >
      </view> -->

            <!-- 帖子列表 -->

            <MeScrollPage
                :config="{
                    down: {
                        // use: false,
                    },
                    height: 100
                }"
                type="body"
                ref="MeScrollPageREF"
                :page="page"
                v-if="page.params.type === '1' || page.params.bizTarget"
            >
                <forumList ref="forumListREF" :data="page.data"></forumList>
            </MeScrollPage>
        </view>
        <!-- 视频列表 -->
        <MeScrollPage
            :config="{
                down: {
                    // use: false,
                }
            }"
            type="body"
            ref="MeScrollPageREF"
            :page="page"
            v-if="page.params.type === '2'"
        >
            <VideoList :data="page.data" ref="videoListREF"></VideoList>
        </MeScrollPage>
    </view>
</template>

<script setup lang="ts">
import { getPostListAPI } from '@/api/posts'
import { PageProps } from '@/hooks/usePage'
import VideoList from '../../components/videoList/videoList.vue'
import { getTopicDetailAPI } from '@/api/topic'
import selectNav from '../../components/selectNav/index.vue'
import sleectTags from '../../components/selectTags/index.vue'
const forumListREF = ref()
const activeNav = ref(1)
const MeScrollPageREF = ref()
const videoListREF = ref()
const navList = [
    { text: '关注' },
    {
        text: '推荐'
    }
]

const tagsList = [
    {
        text: '热门'
    },
    {
        text: '新发'
    }
]

const waterResetLoad = () => {
    nextTick(() => {
        videoListREF.value.waterfallREF.resetLoadmore()
    })
}

const page = reactive<PageProps>({
    params: {
        // 搜索参数
        search: '',
        // 类型：1.帖子 2.视频
        type: '',
        // 状态：0.待审核 1.已通过 2.未通过
        state: 1,
        // 话题id
        topicId: '',
        // 业务tab：1.热门 2.新发
        bizTab: 1,
        // 业务target：1.关注 2.推荐
        bizTarget: 2,
    },
    fetchData: getPostListAPI // 请求接口 带分页的
})

const bizTypeSwitch = (type: number) => {
    if (type === 2 && !page.beforeLoadingFn) {
        page.beforeLoadingFn = waterResetLoad
    } else {
        page.beforeLoadingFn = null
    }
    page.params.type = type + ''
}

const bizTabSwitch = (val: number) => {
    page.params.bizTab = val + ''
    getList()
}
const bizTargetSwitch = (val: number) => {
    page.params.bizTarget = val + ''

    getList()
}

const getList = () => {
    nextTick(() => {
        MeScrollPageREF.value.resetData()
    })
}
// 话题信息
const topicInfo = ref<ITopic>({})

// 获取话题详情
const getTopicDetail = () => {
    if (!page.params.topicId) return
    getTopicDetailAPI(page.params.topicId).then((res) => {
        console.log(res)
        if (res.code === 0) {
            topicInfo.value = res.data
        }
    })
}

onLoad((op) => {
    console.log(1121, op)

    if (op!.topicId) {
        page.params.topicId = op!.topicId
        page.params.type = '1'

        page.params.bizTarget = ''
        getTopicDetail()
        // nextTick(() => {
        //   getList();
        // });
    }
})
</script>

<style scoped lang="scss">
//.nav-box {
//  width: 100%;
//  padding: 0 80rpx;
//  font-size: 15px;
//  color: #7b7b7b;
//  position: relative;
//  .dot {
//    content: "";
//    display: block;
//    width: 16%;
//    height: 10rpx;
//    background-color: #3c8bfb;
//    position: absolute;
//    bottom: -10rpx;
//    left: 80rpx;
//    border-radius: 999rpx;
//    transition: all 0.3s;
//  }
//  .active {
//    color: #1a1a1a;
//    font-size: 16px;
//    font-weight: 700;
//  }
//}
.topic-header {
    padding: 30rpx;
    border-bottom: 1px solid #efefef;

    .title {
        font-size: 14px;
        font-weight: 700;
    }

    .subtitle {
        color: #999999;
        font-size: 12px;
    }

    .topic-right {
        .topic-type {
            color: #999999;
            background-color: #f7f7f8;
            border-radius: 10rpx;
            padding: 10rpx 20rpx;

            &.active {
                background-color: #376af7;
                color: #fff;
            }
        }
    }
}

.content {
    padding: 0 30rpx;

    .tag {
        padding: 40rpx 0;

        .tag-item {
            background-color: #f7f7f8;
            padding: 10rpx 30rpx;
            color: #4c5879;
            font-size: 13px;
            border-radius: 999rpx;
        }

        .active {
            background-color: #376af7;
            color: #fff;
        }
    }
}
</style>
